<template>
	<view class="interestService-page bgimg1 position-relative">
		<u-navbar :title="$t('hhh.t77')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>
		<view class="position-absolute" style="width: 530rpx;height: 530rpx;top:20vh;left:50%;margin-left: -265rpx;">
			<image src="/static/imgs/xingqiu.png" mode="aspectFill" class="w-100 h-100 z-index"></image>
			<view class="position-absolute top-0 left-0 ml-2 mt-2">
				<view class="pulse-ripple flex items-center justify-center"></view>
			</view>
		</view>
		<view class="randombox position-relative" id="randomContainer">
			<view v-for="(item,index) in dataList" :key="index"
				class="flex flex-column align-center userItem position-absolute"
				:class="iscomplete?'animate-fade-in':'opacity-0'" :style="{'left':item.left +'px','top':item.top +'px'}"
				@tap="navTo(`/pages/playerhome/playerhome?id=${item.id}`)">
				<image :style="{'width':item.size+'px','height':item.size+'px'}"
					class="rounded-circle box-shadow1 border bdcolor1" :src="item.heading" mode="aspectFill"
					style="width: 68rpx;height: 68rpx;"></image>
				<text class="text-white fs-28 mt-1">{{item.nickname}}</text>
			</view>
		</view>

		<view class="match-find mx-auto mt-4 flex flex-column py-5 box-sizing">
			<image class="mx-auto mb-5" src="/static/imgs/match_like.png" mode="widthFix"
				style="width: 247rpx;height: 31rpx;">
			</image>
			<view class="flex mx-3 mb-4">
				<text class="text-white fs-28 font-weight-bold label flex-shrink">{{$t('hhh.t63')}}</text>
				<view class="flex flex-wrap">
					<text class="px-2 py-1 fs-24 mr-2 rounded-circle mb-2 interestsItem text-center box-sizing"
						v-for="(item,index) in interests" :key="index"
						:class="interestName === item.id?'bg110124 text-white':'bgF3F4FA text-black'"
						@tap="changeinterst(item)">{{item.name}}</text>
				</view>
			</view>
			<view class="flex mx-3 mb-4">
				<text class="text-white fs-28 font-weight-bold label flex-shrink">{{$t('hhh.t79')}}</text>
				<view class="flex flex-wrap">
					<text class="px-2 py-1  fs-24 mr-2 rounded-circle mb-2" v-for="(item,index) in gender" :key="index"
						:class="genderName === item.type?'bg110124 text-white':'bgF3F4FA text-black'"
						@tap="changegender(item)">{{item.name}}</text>
				</view>
			</view>

			<view class="flex mx-3 mb-4">
				<text class="text-white fs-28 font-weight-bold label flex-shrink">{{$t('hhh.t78')}}</text>
				<view class="flex align-center justify-between bg-white flex-1 rounded-circle px-2 py-1 fs-22"
					@tap="ageshow = true">
					<text>{{curAge.name}}</text>
					<image src="/static/imgs/right5.png" mode="aspectFill" class="w-32 h-32"></image>
				</view>
			</view>
			<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold mx-3"
				@tap="quickSearch">{{$t('hhh.t77')}}
			</view>
		</view>
		<u-gap height="50" bgColor="transparent"></u-gap>

		<u-picker :show="ageshow" :columns="agecolumns" keyName="name" itemHeight="88" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="ageshow = false" @confirm="ageConfirm"></u-picker>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				dataList: [],
				minSize: 20,
				maxSize: 40,
				container: null,
				interests: [],
				interestName: null,
				gender: [{
						type: 0,
						name: 'All'
					},
					{
						type: 1,
						name: 'Male'
					},
					{
						type: 2,
						name: 'Female'
					},
				],
				genderName: 0,
				ageshow: false,
				curAge: {
					type: 0,
					name: 'All'
				},
				iscomplete: false
			}
		},
		computed: {
			agecolumns() {
				return [
					[{
						type: 0,
						name: 'All'
					}, {
						type: 1,
						name: '18-20'
					}, {
						type: 2,
						name: '21-25'
					}, {
						type: 3,
						name: '26-30'
					}, {
						type: 4,
						name: '30 or above'
					}]
				]
			}
		},
		onLoad() {
			this.userInterests()
		},
		mounted() {
			this.container = document.querySelector('#randomContainer');
		},
		beforeDestroy() {
			this.quickTimer && clearTimeout(this.quickTimer)
			this.quickTimer = null
		},
		methods: {
			userInterests() {
				HttpApi.userInterests().then(res => {
					if (res.code === 1) {
						const list = res.data.list
						if (!list.length) return
						this.interests = list
						this.interestName = list[0].id
						this.quickSearch()
					}
				})
			},
			quickSearch() {
				const data = {
					tags: this.interestName,
				}
				if (this.genderName !== 0) {
					data.gender = this.genderName
				}
				if (this.curAge.type !== 0) {
					data.age_range = this.curAge.type
				}
				this.iscomplete = false
				uni.$tools.showLoading()
				HttpApi.quickSearch(data).then(res => {
					if (res.code === 1) {
						const list = res.data.list.map(i => {
							return {
								...i,
								left: 0,
								top: 0,
								size: 0
							}
						})
						uni.hideLoading()
						if (!list.length) {
							uni.$tools.toast(this.$t('hhh.t76'))
							return
						}
						this.dataList = list
						this.quickTimer && clearTimeout(this.quickTimer)
						this.quickTimer = null
						this.quickTimer = setTimeout(() => {
							this.quickSearch()
						}, 20000)
						this.init()
					}
				})
			},
			ageConfirm(val) {
				this.curAge = val.value[0]
				this.ageshow = false
			},
			changeinterst(item) {
				this.interestName = item.id
			},
			changegender(item) {
				this.genderName = item.type
			},
			init() {
				setTimeout(() => {
					this.$nextTick(() => {
						this.generateElements()
					})
				}, 500)
			},
			getRandomInt(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			generateElements() {
				const containerRect = this.container.getBoundingClientRect();
				const containerWidth = containerRect.width;
				const containerHeight = containerRect.height;
				const elements = document.querySelectorAll('.userItem');
				const doms = uni.createSelectorQuery()
					.in(this) // 指定当前组件实例
					.selectAll('.userItem').boundingClientRect(elements => {
						if (!elements.length) return;
						// 遍历更新每个元素的位置
						elements.forEach((item, index) => {
							const size = this.getRandomInt(this.minSize, this.maxSize);
							const maxLeft = containerWidth - size;
							const maxTop = containerHeight - size;
							const left = this.getRandomInt(0, maxLeft);
							const top = this.getRandomInt(0, maxTop);
							this.$set(this.dataList, index, {
								...this.dataList[index],
								left: left,
								top: top,
								size: size
							})
						})
						this.iscomplete = true
					}).exec();
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.interestService-page {
		min-height: 100dvh;
		background-image: url('/static/imgs/matchbg.png?v=123');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;

		.randombox {
			height: 50dvh;
		}

		.animate-fade-in {
			animation: fadeIn 0.5s ease-in-out;
		}

		.match-find {
			width: 670rpx;
			height: 640rpx;
			background-image: url('/static/imgs/match_card.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;

			.interestsItem {
				min-width: 120rpx;
			}

			.label {
				width: 150rpx;
			}
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: scale(0.8);
			}

			to {
				opacity: 1;
				transform: scale(1);
			}
		}

		.pulse-ripple {
			position: relative;
			width: 500rpx;
			height: 500rpx;
			border-radius: 50%;
			// background: radial-gradient(circle, rgba(195, 105, 255, 0.8) 0%, rgba(195, 105, 255, 0.4) 70%, rgba(195, 105, 255, 0) 100%);
		}

		.pulse-ripple::before,
		.pulse-ripple::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(195, 105, 255, 0.6) 0%, rgba(195, 105, 255, 0.2) 70%, rgba(195, 105, 255, 0) 100%);
			animation: pulse 3s linear infinite;
		}

		.pulse-ripple::after {
			animation-delay: 1.5s;
		}

		@keyframes pulse {
			0% {
				transform: scale(0.5);
				opacity: 1;
			}

			100% {
				transform: scale(2);
				opacity: 0;
			}
		}
	}
</style>